<div data-page="moviehome" class="page" id="moviehome">
    <style>
        #moviehome .content-block-inner.no-border:before {
            background-color: transparent;
        }
        #moviehome .content-block-inner {
            background-color: transparent;
        }
        #moviehome .content-block-inner:before {
             /*background-color: transparent;*/
        }
        #moviehome .content-block-inner:after {
            background-color: transparent;
        }
        #moviehome .page-content {
            background-color: white;
        }
        #moviehome .list-block,.content-block {
            margin: 0;
        }
        #moviehome .list-block ul:before {
            /*background-color: transparent;*/
        }
        #moviehome .list-block ul:after {
            background-color: transparent;
        }
    </style>
    <div class="page-content">
        <div class="frosted-glass"
             style="width: 100vw; height:55vw;
                     background-image: url('{{MOVIE_POSTER mid poster}}');
                     background-color: #aaa;background-size:cover">
            <!--<img src="{{MOVIE_POSTER mid poster}}" onerror="onMoviePosterError(this)">-->
        </div>
        <img src="{{MOVIE_POSTER mid poster}}"
             style="position:absolute;top:20px;width: 30vw;height:45vw;margin-left: 35vw"
             onerror="onMoviePosterError(this)">
        <div class="content-block" style="text-align: center;">
            <div class="content-block-inner no-border">
                <h2 style="margin: 12px 0 10px 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{movie_name}}</h2>
                <h5 style="margin: 10px 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{category}}</h5>
                <div class="color-gray"><small style="margin-right: 30px">{{publish}}上映</small><small>片长:{{filmlength}}分钟</small></div>
                <div class="row no-gutter" style="margin: 10px 25vw;box-shadow: 4px 4px 0px #c9c9c9;">
                    <div class="col-50 bg-custom color-white"
                         style="text-align: center;line-height: 20px;padding: 3px 0;">甜甜圈指数</div>
                    <div class="col-50 bg-white color-gray"
                         style="text-align: center;line-height: 20px;padding: 6px 2px 0;">
                        <img src="{{formatDoughnutCenter score}}" width="100%">
                    </div>
                </div>
            </div>
        </div>

        <a class="movie-collection button button-round button-fill {{#if collection_id}}color-gray{{else}}color-custom{{/if}}"
           href="#"
           style="position: absolute;right: 0; border-radius: 27px 0 0 27px;top: 45vw;">
            {{#if collection_id}}
                <img class="f7-icons" src="./img/set_movie_collection_w_2.png" width="16px" height="14px"
                     style="vertical-align:middle"/><span style="margin-left: 14px">已收藏</span>
            {{else}}
                <img class="f7-icons" src="./img/set_movie_collection_w_1.png" width="16px" height="14px"
                     style="vertical-align:middle"/><span style="margin-left: 14px">收藏</span>
            {{/if}}
        </a>
        {{#if cinemacount}}
            <div class="list-block">
                <ul>
                    <li>
                        <a href="#" class="item-link item-content open-slider-modal">
                            <div class="item-media"><i class="f7-icons color-custom">videocam_round_fill</i></div>
                            <div class="item-inner">
                                <div class="item-after">可预约点播影院</div>
                                <div class="item-after"><span class="badge bg-custom">{{cinemacount}}</span></div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        {{/if}}
        <div class="content-block">
            <div class="content-block-inner">
                <h2 class="color-gray">影片简介</h2>
                <p style="line-height: 28px;font-size: 13px;padding: 0 3px">{{brief}}</p>
            </div>
        </div>
    </div>
</div>